<html> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>新增和后台返回数据接收示例</title>
<style>
.input-text{width:150px;height:30px;line-height:30px}
.row{height:50px;line-height:50px;}
.fst_stl{margin-left:100px;margin-top:50px;}
</style>
</head>   
<body>  
	  <h1>测试新增提交数据和后台返回数据</h1>
    <h1>Hello ${name} !</h1> 
    
    <input type="text" class="input-text" value="${name}" placeholder="" id="adminName" name="adminName"/>
    <div class="fst_stl">
	<form class="form form-horizontal" id="form-add" >
	<div class="row cl">
		<div class="formControls col-xs-8 col-sm-9">
			<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>学生姓名：</label>
			<input type="text" class="input-text" value="" placeholder="" id="userName" name="userName">
		</div>
	</div>
	<div class="row cl">
		<div class="formControls col-xs-8 col-sm-9">
			<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>班级：</label>
			<input type="text" class="input-text" value="" placeholder="" id="userClass" name="userClass">
		</div>
	</div>
	 <div class="row cl">
		<div class="formControls col-xs-8 col-sm-9">
			<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>成绩：</label>
			<input type="text" class="input-text" value="" placeholder="" id="userScore" name="userScore">
		</div>
	</div> 
	<!-- <div class="row cl">
		<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>成绩：</label>
		<div class="formControls col-xs-8 col-sm-9">
			<input type="password" class="input-text" autocomplete="off" value="" placeholder="成绩" id="userpwd" name="userpwd">
		</div>
	</div>-->
	<div class="row cl">
		<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
			<input class="btn btn-primary radius" type="button" value="&nbsp;&nbsp;提交&nbsp;&nbsp;" onclick="$('#form-add').submit()"/>
		</div>
	</div>
	</form>
	</div>
	<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script> 
	<script type="text/javascript" src="lib/jquery.validation/1.14.0/jquery.validate.min.js"></script>
	<script type="text/javascript" src="lib/jquery.validation/1.14.0/validate-methods.js"></script>
	<script type="text/javascript" src="lib/jquery.validation/1.14.0/messages_zh.min.js"></script>
	<!-- 数据提交校验 -->
	<script type="text/javascript" src="lib/icheck/jquery.icheck.min.js"></script> 
	<!--请在下方写此页面业务相关的脚本--> 
	<script type="text/javascript">
		$(function(){
			$("#form-add").validate({
				rules:{
					userName:{
						required:true,
						minlength:3,
						maxlength:16
					},
					userScore:{
						required:true,
					},
				},
				onkeyup:false,
				focusCleanup:true,
				success:"valid",
				submitHandler:function(form){					
			   		$.ajax({
			            type: 'post', 
						contentType:"application/json", 
			            url: '/saveAddAccountP', 
			            data:JSON.stringify({
								'userName': $("#userName").val()+'',
								'userScore': $("#userScore").val(),
				                'userClass':$("#userClass").val()
								}),
			            success:function(data){ 
			 				console.log('提交成功！');alert("提交成功");
			            }
			
			        });
		
					
				}
			});
		});
	</script> 
</body>    
</html>   
 